<!-- 小程序 -->
<template>
  <el-dialog v-model="dialogVisible" title="小程序码" width="300px" top="30vh" class="base_dialog">
    <div class="applets_code_content">
      <el-image style="width: 200px; height: 200px" :src="`data:image/png;base64,${filePath}`" fit="fill" />
      <!-- <div @click="copy" class="url">公众号跳转链接</div> -->
    </div>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(formRef)">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template> -->
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose } from "vue";
import api from "@api/config";
import { $msg } from "@/common/ui/msg";

const dialogVisible = ref(false);

const filePath = ref(null)
const url = ref(null)

function copy() {
  // 模拟 输入框
  var cInput = document.createElement("input");
  cInput.value = url.value;
  document.body.appendChild(cInput);
  cInput.select(); // 选取文本框内容

  // 执行浏览器复制命令
  // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
  // Input要在正常的编辑状态下原生复制方法才会生效

  document.execCommand("copy");

  $msg.succ("复制成功")

  // 复制成功后再将构造的标签 移除
  document.body.removeChild(cInput);
}

function show() {
  dialogVisible.value = true;
}

const TYPE = {
  goods: 1,
  hotel: 2,
  travel: 3,
  gift: 4
}

function getUnlimited(data) {
  api.code(data.code, TYPE[data.type], val => {
    filePath.value = val.filePath
    url.value = val.url
    show()
  })
}

defineExpose({ getUnlimited });

</script>

<style lang="scss">
.base_dialog {
  .applets_code_content {
    height: 260px;
    text-align: center;
    .url {
      padding-top: 10px;
      color: #409eff;
      cursor: pointer;
    }
  }
}
</style>
